{% extends "admin_base_layout.html" %}
{% block head_part %}
    <style>
        .dashboard-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .dashboard-card h5 {
            font-size: 1.25rem;
            margin-bottom: 10px;
            color: #333;
        }
        .dashboard-card span {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff;
        }
    </style>
{% endblock head_part %}

{% block body %}
<div id="page-container" class="container-fluid mt-4">
    <div class="row">
        <div class="col-md-6">
            <div class="dashboard-card">
                <h5>Total Balance</h5>
                <span>{{ data.total_balance }}</span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="dashboard-card">
                <h5>Withdrew Balance</h5>
                <span>{{ data.withdrew }}</span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="dashboard-card">
                <h5>Reward</h5>
                <span>{{ data.reward }}</span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="dashboard-card">
                <h5>Rank</h5>
                <span>{{ data.rank }}</span>
            </div>
        </div>
    </div>
</div>
{% endblock body %}